<template>
	<div>
		<div class="addNeworder" style="margin-top: 0;margin-bottom: 2.5rem;">

			<div class="identity-type">
				<span>物料列表</span>
				<!--<i>添加物料</i>-->
			</div>
			<div class="material-list">
				<ul class="material_list">
					<li v-for="(item,index) in list" :key="index">
						<p><span>{{item.materialName}}</span></p>
						<p><span>物料重量</span><b>{{item.weight}}<em>吨</em></b></p>
						<p><span>物料单价</span><b>{{item.unitPrice}}<em>元/吨</em></b></p>
						<p><span>含杂比例</span><b>{{item.zazhiPercent}}<em>%</em></b></p>
					</li>
				</ul>
				<span style="padding-top: 0.5rem;display: inline-block;">补传物料图片</span>
				<div class="weui-cells weui-cells_form" style="margin: 0.5rem 0 1.05rem 0">
					<!--<form method="post" >-->
					<div class="invoice_warp" style="margin-top: 0;">
						<div class="weui-cells weui-cells_form">
							<form method="post" id="form" action="##" enctype="multipart/form-data">
								<div class="weui-cell" style="padding: 0;">
									<div class="weui-cell__bd">
										<div class="weui-uploader__bd">
											<ul class="weui-uploader__files">
												<li class="weui-uploader__file" v-for='(item,index) in liFiles' :key=index>
													<img :src="item" alt="" class="baseImg">
													<img src="../../images/delete.png" alt="" class="delete" @click="deleteClick(index)">
												</li>
											</ul>
											<div class="weui-uploader__input-box">
												<input id="uploaderInput" multiple=false class="weui-uploader__input js_file" type="file" accept="image/*"
												 @change="changeClick()">
											</div>
										</div>
									</div>
								</div>
							</form>
						</div>
					</div>
					<span style="width: 100%;font-size: 0.64rem;text-align: center;display: inline-block;padding-top: 1rem;">如需修改订单，请联系客服</span>
					<!--</form>-->
				</div>
			</div>
			<div class="addNeworder-top">
				</h3>
				<p>
					<span>运输方式</span>
					<span><i class="iconfont icon-duigouzhong factory active"></i><span class="transType">{{tranType==0?'到厂':'自提'}}</span></span>
				</p>
				<p>
					<span>是否含税</span>
					<span><i class="iconfont icon-duigouzhong hanshui active"></i><span class="hasTax">{{isHanshui==10?'含税':'未税'}}</span></span>
				</p>
				<p style="border-bottom: 0;">备注：</p>
				<textarea v-model="remarks" name="" rows="" cols="" class="remarks"></textarea>
			</div>
		</div>
		<div class="demos-content-padded">
			<a href="javascript:;" @click="submitBtn" class="weui-btn weui-btn_mini weui-btn_primary">确定</a>
		</div>
		<div class="weui-gallery" style="display: none">
			<span class="weui-gallery__img"></span>
		</div>
	</div>
</template>

<script>
	import {
		getFgOrderDetail,
		uploadOrderImg,
		getOrderImg,
		deleteOrderImg,
		addOrEditOrder
	} from '../../config/api'
	import {
		Toast,
		TopTips,
		Dialog
	} from 'we-vue'
	import { imgBaseUrl } from '../../config/axios'
	import { getStore,setStore } from '../../config/mUtils'
	export default {
		inject: ['reload'],
		data() {
			return {
				orderid: this.$route.query.orderid,
				orderNo: '',     //订单号
				list: '',        
				isHanshui: '',    //是否含税
				tranType: '',       //运输方式
				liFiles: [],   //图片本地路径
				form: new FormData(), 
				imgSrc:[],     //图片路径
				indexImg:'',  
				remarks:''  //留言
			}
		},
		created() {
			getFgOrderDetail(this.orderid).then(res => {
				this.orderNo = res.content.orderNo
				this.list = res.content.orderMaterialList
				this.isHanshui = res.content.isHanshui
				this.tranType = res.content.tranType
				getOrderImg(this.orderNo).then(res => {
					this.imgSrc = res.content
					if(this.imgSrc.length==0){
						setStore('indexImg',0)
					}else{
						this.indexImg = getStore('indexImg')
					}
					if (res.code == 100) {
						for(let i=0;i<res.content.length;i++){
							this.liFiles.push(imgBaseUrl+res.content[i])
						}
					}
				})
			})

		},
		methods: {
			changeClick(item) {
				let files = document.querySelector("#uploaderInput").files

				/**
				 * 若是单张上传
				 */
				let reader = new FileReader()
				reader.readAsDataURL(files[0])
				reader.onload = (e) => {
					this.liFiles.push(e.target.result)			
				}
				this.indexImg++
				setStore('indexImg',this.indexImg)		
				this.form.append('file', files[0])
				this.form.append('orderNo', this.orderNo)
				this.form.append('number',getStore('indexImg'))
				uploadOrderImg(this.form).then(res => {
					if (res.code == 100) {
						Toast.success('上传成功');
						setTimeout(() => {
							this.reload()
						}, 500)
					}
				})
			},
			deleteClick(index) {
				Dialog.confirm({
					title: '提示',
					message: '确认删除这张图片么？',
					showCancelButton: true
				}).then(() => {
					this.liFiles.splice(index, 1)
					deleteOrderImg(this.imgSrc[index]).then(res=>{
						if (res.code == 100) {
							setTimeout(() => {
								this.reload()
							}, 500)
						}
					})
				})
			},
			//提交订单
			submitBtn(){
				Dialog.confirm({
					title: '提示',
					message: '是否确认提交订单，提交后无法修改，如需修改，请联系客服处理',
					showCancelButton: true
				}).then(()=>{
					addOrEditOrder(this.orderid,this.remarks).then(res=>{
						if(res.code==100){
							Toast.success('订单提交成功');
							setTimeout(() => {
								this.$router.push('/orderList')
							}, 1200)						
						}
					})
				})
			}
		}
	}
</script>

<style scoped="scoped" lang="css">
	.demos-content-padded {
		width: 100%;
		height: 2.5rem;
		position: fixed;
		bottom: 0;
		left: 0;
		line-height: 2.5rem;
		color: #fff;
		margin-bottom: 0;
		padding: 0;
	}

	.demos-content-padded .weui-btn_primary {
		width: 100%;
	}

	.addNeworder .addNeworder-top p span {
		height: auto;
	}

	.invoice_warp .weui-uploader__input-box {
		height: 3.8rem;
		width: 3.5rem;
	}

	.invoice_warp .weui-uploader__files li img {
		height: 100%;
	}

	.weui-uploader__file {
		/* border: 1px solid #fff; */
	}
</style>
